<!--import xss from "xss"-->
<template>
  <j-modal
    :title="title"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle ="bodyStyle"
    :switchFullscreen="switchFullscreen"
    @cancel="handleCancel"
   >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <a-button @click="toHandle">确定</a-button>
    </template>
    <div style="padding: 50px">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item ref="name" label="办事人" >
          <div>{{ record.issuer }}</div>
        </a-form-model-item>
        <a-form-model-item label="手机号" prop="">
          <div>{{ record.phone }}</div>
        </a-form-model-item>
        <a-form-model-item label="所属区域">
          <div>{{ record.region }}</div>
        </a-form-model-item>
        <a-form-model-item label="事项详情">
          <div>{{ record.materDatails }}</div>
        </a-form-model-item>
        <a-form-model-item label="完成情况" v-if="tit" prop="completeStart">
          <a-select placeholder="请选择" v-model="form.completeStart">
            <a-select-option :value="0">
              未完成
            </a-select-option>
            <a-select-option :value="1">
              已完成
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="反馈说明" prop="feedback">
          <a-input placeholder="请输入" v-model="form.feedback" type="textarea" />
        </a-form-model-item>
        <a-form-model-item label="附件上传" prop="file">
          <span style="position: relative;">
            <j-upload v-model="form.file"/>
            <div>
              支持扩展名：.rar .zip .doc .docx .pdf .jpg...
            </div>
          </span>
        </a-form-model-item>
      </a-form-model>
    </div>

  </j-modal>
</template>

<script>
  import {getUserList} from '@/api/api'
  import xss from 'xss'
  import {updateBacklog} from "@api/sjsk/specialist";
  export default {
    name: "SysAnnouncementModal",
    components: {
    },
    data () {
      return {
        tit:true,
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
        other: '',
        form: {
          // completeStart:undefined,
          // feedback:'',
          // file:''
        },
        rules: {
          // file: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
          feedback: [{ required: true, message: '请输入反馈说明', trigger: 'blur' }],
          completeStart: [{ required: true, message: '请选择完成情况', trigger: 'blur' }],
        },




        title:"督办反馈",
        record: {},
        visible: false,
        switchFullscreen: true,
        loading: false,
        bodyStyle:{
          padding: "0",
          // height:(window.innerHeight*0.8)+"px",
          "overflow-y":"auto",
        },
        modelStyle:{
          width: '30%',
          style: { top: '20px' },
          fullScreen: false
        }
      }
    },
    created () {
    },
    methods: {
      detail (record,tit) {
        this.visible = true
        this.record = record;
        this.form.completeStart = record.completeStart
        this.form.feedback = record.feedback
        if(tit === 2){
          this.tit = false
        } else {
          this.tit = true
        }
      },
      handleCancel () {
        this.visible = false;
        this.$refs.ruleForm.resetFields();
      },
      /** 切换全屏显示 */
      handleClickToggleFullScreen() {
        let mode = !this.modelStyle.fullScreen
        if (mode) {
          this.modelStyle.width = '100%'
          this.modelStyle.style.top = '20px'
        } else {
          this.modelStyle.width = '60%'
          this.modelStyle.style.top = '50px'
        }
        this.modelStyle.fullScreen = mode
      },
      toHandle(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.form = Object.assign({}, {id: this.record.id},this.form)
            console.log(this.form)
            updateBacklog(this.form).then(ser => {
              if(ser.success){
                if(this.tit){
                  this.$message.success('反馈成功');
                  this.visible = false
                } else {
                  this.visible = false

                }
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="less">
  //.announcementCustomModal{
  //  .ant-modal-header {
  //    border: none;
  //    display: inline-block;
  //    position: absolute;
  //    z-index: 1;
  //    right: 56px;
  //    padding: 0;
  //    .ant-modal-title{
  //      .custom-btn{
  //        width: 56px;
  //        height: 56px;
  //        border: none;
  //        box-shadow: none;
  //      }
  //    }
  //  }
  //  .daily-article{
  //    border-bottom: 0;
  //  }
  //}
</style>
<style scoped lang="less">
  //.daily-article {
  //  .article-button {
  //    font-size: 1.2rem !important;
  //  }
  //  .ant-card-body {
  //    padding: 18px !important;
  //  }
  //  .ant-card-head {
  //    padding: 0 1rem;
  //  }
  //  .ant-card-meta {
  //    margin-bottom: 1rem;
  //  }
  //  .article-content {
  //    p {
  //      word-wrap: break-word;
  //      word-break: break-all;
  //      text-overflow: initial;
  //      white-space: normal;
  //      font-size: .9rem !important;
  //      margin-bottom: .8rem;
  //    }
  //  }
  //}
</style>
